<template>
  <div id="menu">
    <div class="holeTitle" v-if="!iconLogo || iconLogo.length == 0">
      <img
        :src="menuRoot.icon"
        :style="{ width: '44px', height: '44px' }"
      />
      <span
        class="logo_text"
        :style="{
          'margin-left': '25px',
          'text-overflow': 'ellipsis',
          'white-space': 'nowrap',
          overflow: 'hidden',
          color:'#fff'
        }"
        >{{ menuRoot.name }}</span
      >
    </div>
    <div style="height: 60px; width: 100%" v-else>
      <img
        :src="iconLogo"
        :style="{ height: '100%', width: '100%', 'border-radius': '0px' }"
      />
    </div>
    <Menu
      :theme="theme2"
      :open-names="[submenuOpen]"
      :active-name="menuActive"
      accordion
      class="w-auto"
      @on-select="changeMenu"
    >
      <Submenu
        :name="menuList[index].title"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <template slot="title">
          <div
            class="verticalItem d-flex align-items-center"
            :style="{ 'line-height': 'baseline' }"
          >
            <img
              :src="item.icon"
              :style="{ width: '16px', height: '16px' }"
            />
            <span class="layout-text" :style="{ 'margin-left': '10px' }">{{
              itemTitle(item)
            }}</span>
          </div>
        </template>

        <template v-for="(child, index2) in item.children">
          <MenuItem
            :name="child.path"
            :to="child.path"
            :key="'menuitem' + index2 + child.path"
          >
            <div
              class="verticalItem d-flex align-items-center"
              :style="{ 'line-height': 'baseline' }"
            >
              <img
                :src="child.icon"
                :style="{ width: '14px', height: '14px' }"
              />
              <span
                class="layout-text"
                :key="'title' + child.path"
                :style="{ 'margin-left': '10px' }"
              >
                {{ itemTitle(child) }}
              </span>
            </div>
            <!-- <Icon :type="child.icon" :key="'icon' + index2 + child.path"></Icon> -->
          </MenuItem>
        </template>
      </Submenu>
    </Menu>
  </div>
</template>
<script>
export default {
  name: "YnMenu",
  data() {
    return {
      theme2: "dark",
      menuActive: "",
      submenuOpen: "",

      menuList: [
        {
          title: "控制台",
          "icon": "https://www.rayscloud.cn/tyrz/icon/icon-p-78.png", 
          children: [
            {
              path: "/console",
              icon: "https://www.rayscloud.cn/tyrz/icon/icon-p-90.png",
              title: "主控台",
            },
            {
              path: "/control",
              icon: "https://www.rayscloud.cn/tyrz/icon/icon-p-90.png",
              title: "监控页",
            },
          ],
        },
        {
          title: "设备管理",
          "icon": "https://www.rayscloud.cn/tyrz/icon/icon-p-78.png", 
          children: [
            {
              path: "/device",
              icon: "https://www.rayscloud.cn/tyrz/icon/icon-p-90.png",
              title: "设备列表",
            },
          ],
        },
      ],
      menuRoot: {
        appId: "214",
        name: "校智联",
        icon: "https://www.rayscloud.cn/tyrz/icon/icon-p-40.png",
      },
      currentPaths: [
        {
          rid: 0,
          title: "控制台",
        },
        {
          path: "/console",
          icon: "https://www.rayscloud.cn/tyrz/icon/icon-p-79.png",
          title: "主控台",
        },
      ],
    };
  },
  props: {
    iconLogo: {
      type: String,
      default() {
        return "";
      },
    },
  },
  computed: {
    menuitemClasses: function () {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },

    // currentPaths() {
    //   return this.currentPaths[this.currentPaths.length - 1];
    // },
  },
  created() {
    this.menuActive = this.currentPaths[1].path;
    this.submenuOpen = this.currentPaths[0].title;
  },
  methods: {
    itemTitle(item) {
      if (typeof item.title === "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
    },
    changeMenu(path) {
      this.$emit("menuClick", path);
    },

    itemTitle(item) {
      if (typeof item.title === "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
    },
  },
};
</script>
<style lang="less" scoped>
#menu {
  img {
    border-radius: 3px;
  }
  .holeTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    background: #515a6e;
  }
  .ivu-menu-submenu-title {
    .layout-text {
      font-size: 16px;
    }
  }
}

// 目录折叠
.ivu-layout-sider-collapsed {
  .holeTitle {
    .logo_text {
      display: none;
      transition: width 0.2s ease;
    }
  }
  .layout-text {
    display: inline-block;
    transition: width 0.2s ease;
  }
  .ivu-menu-vertical {
    .ivu-menu-submenu-title {
      padding: 14px 16px;
      position: relative;
      cursor: pointer;
      z-index: 1;
      transition: all 0.2s ease-in-out;
    }
  }
  .ivu-menu-submenu-title {
    display: none !important;
  }
  .ivu-menu-item {
    padding: 14px 24px;
  }
  .btn_tools {
    .ivu-btn {
      margin: 0 5px;
    }
  }
}
</style>
